<!-- 打包管理 - 预打包管理 列表 -->
<template>
  <div class="container">
    <vxe-toolbar
      id="warehouseLocationId"
      :custom="{ storage: true }"
      export
      :refresh="{query: findList}"
    >
      <template v-slot:buttons>
        <div class="btnMargin">
          <el-button @click="findList">查询</el-button>
          <el-button @click="handleClick('add')">新增</el-button>
          <el-button @click="tasksClick" :disabled="tasksShow">打包任务下发</el-button>
        </div>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      :loading="loading"
      class="mytable-footer"
      height="640"
      align="center"
      export-config
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      sort-config.remote
      @checkbox-change="selectChangeEvent"
      :seq-config="{startIndex: listQuery.pageNum * listQuery.pageSize - listQuery.pageSize}"
      auto-resize
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="status"
          title="状态"
          min-width="150"
          sortable
          :formatter="formatterStatus"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库名称" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.warehouseName" placeholder="仓库名称" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="shipmentName" title="入驻商" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <!-- <el-select v-model="listQuery.shipmentName" clearable filterable placeholder="入驻商">
            <el-option
              v-for="item in options"
              :key="item.partyCode"
              :label="item.userName"
              :value="item.userName">
            </el-option>
          </el-select> -->
          <el-input v-model="listQuery.shipmentName" placeholder="入驻商" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="code" title="预打包计划号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.code" placeholder="预打包计划号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="sourceCode" title="来源单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.sourceCode" placeholder="来源单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="packageQuantity" title="包裹数" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.packageQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.packageQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="pickingQuantity" title="拣货包裹数" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.pickingQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.pickingQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="issueQuantity" title="已下发包裹数" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.issueQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.issueQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="packQuantity" title="已打包包裹数" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.packQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.packQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="totalCombinationQuantity" title="单包裹商品数量" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.totalCombinationQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.totalCombinationQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="totalQuantity" title="商品总数量" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.totalQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.totalQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="createdName"
          title="创建人"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.createdName"
            placeholder="创建人"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="gmtCreated"
          show-header-overflow
          show-overflow
          title="创建时间"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtCreatedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtCreated')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="modifiedName"
          title="修改人"
          min-width="250"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.modifiedName"
            placeholder="修改人"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="gmtModified"
          show-header-overflow
          show-overflow
          title="修改时间"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtModifiedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtModified')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <vxe-button
              type="text"
              @click="handleClick('detail', scope.row.code)"
            >
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="修改" placement="top" v-if="scope.row.status == '0'">
            <vxe-button type="text" @click="handleClick('edit', scope.row.code)">
              <i class="el-icon-edit"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top" v-if="scope.row.status == '0'">
            <vxe-button type="text" @click="funcBlank(scope.row.code)">
              <i class="el-icon-delete"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="库存分配" placement="top" v-if="scope.row.status == '1' || scope.row.status == '2'">
            <vxe-button type="text" @click="funcAllocation(scope.row.code, 1)">
              <i class="iconfont iconkucuntiaozheng"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="取消分配" placement="top" v-if="scope.row.status == '2' || scope.row.status == '3'">
            <vxe-button type="text" @click="funcAllocation(scope.row.code, 0)">
               <i i class="iconfont iconkucuntiaozheng1"></i>
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[10, 15, 20, 50, 100, 500, 1000]"
      @page-change="handlePageChange"
    />
    <vxe-modal
      v-model="operationModel"
      :title="operation.title"
      width="1080"
      height="580"
      destroy-on-close
      resize
    >
      <prePackagedAED
        :operation-type="operation.type"
        :operation-code="operation.code"
        @operationComplete="
          handleClick()
          findList()
        "
      />
    </vxe-modal>
    <!-- 打包任务下发 -->
    <vxe-modal
      v-model="operationTasks"
      title="打包任务下发"
      width="500"
      height="460"
      destroy-on-close
      resize
    >
      <packagingTasks :packageRef="packageRef" @packagingTasksComplete="
          tasksClicks()
          findList()
        " />
    </vxe-modal>
  </div>
</template>
<script>
import prePackagedAED from "./components/prePackagedAED.vue";
import packagingTasks from "./components/packagingTasks.vue";
import { prepackagedList, prepackagedDel } from '@/api/packManagement/prePackaged'
import { shipments } from "@/api/outStorage"; // 入驻商接口
export default {
  name: "预打包管理",
  components: {
    prePackagedAED,
    packagingTasks
  },
  props: {},
  data() {
    return {
      tableData: [],
      // 日期选项
      gmtCreatedRange: '',
      gmtModifiedRange: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 状态
      statusList: [
        { value: '0', label: '新增' },
        { value: '1', label: '待分配' },
        { value: '2', label: '部分分配' },
        { value: '3', label: '待拣货' },
        { value: '4', label: '拣货完成' },
        { value: '5', label: '打包完成' }
      ],
      loading: false,
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      operationModel: false,
      operationTasks: false,
      operation: {
        add: '添加',
        edit: '编辑',
        detail: '详情',
        audit: '审核',
        title: '添加',
        type: 'add',
      },
      packageRef: {},
      options: [], // 入驻商
      selectList: [],
      tasksShow: true
    }
  },
  created(){
    this.findList()
    this.$eventBus.$on("refreshList", () => {
      this.findList()
    })
  },
  methods:{
    findList(){
      this.loading = true
      this.tasksShow = true
      shipments().then(res => {
        this.options = res.data
      })
      return prepackagedList(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    // 勾选、取消事件
    selectChangeEvent({ checked, records }) {
      this.selectList = this.$refs.xTable.getCheckboxRecords()
      if(this.selectList.length === 1){
        if(this.selectList[0].status === '4'){
          if(this.selectList[0].pickingQuantity > this.selectList[0].issueQuantity) {
            this.tasksShow = false
          }
        }else {
          this.tasksShow = true
        }
      }else {
        this.tasksShow = true
      }
    },
    // 新增、编辑
    handleClick(type, code) {
      this.operationModel = !this.operationModel
      if (type) {
        this.operation.type = type
        this.operation.title = this.operation[type]
      }
      if (code) {
        this.operation.code = code
      }
    },
    // 删除
    funcBlank(code) {
      this.$confirm('确认删除吗？', '提示', {
        type: 'warning'
      })
      .then(() => {
        prepackagedDel(code).then((res) => {
          this.$message({ message: res.msg, type: 'success' })
          this.findList()
        })
      })
      .catch(() => { })
    },
    // 库存分配
    funcAllocation(code, type) {
      this.$router.push({
        path: '/pack/inventoryAllocation',
        query: { code: code, type: type }
      })
    },
    // 日期
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + ' 00:00:00'
        this.listQuery[`${prefix}End`] = value[1] + ' 23:59:59'
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
    // 分页handle
    handlePageChange({currentPage, pageSize}) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    },
    // 翻译审核状态
    formatterStatus({cellValue}) {
      const item = this.statusList.find(item => item.value === cellValue);
      return item ? item.label : "";
    },
    // 打包任务下发
    tasksClick() {
      this.packageRef = {
        parcel: this.selectList[0].pickingQuantity - this.selectList[0].issueQuantity,
        code: this.selectList[0].code,
        pickingQuantity: this.selectList[0].pickingQuantity,
        warehouseCode: this.selectList[0].warehouseCode,
        type: '1'
      }
      this.operationTasks = !this.operationTasks
    },
    tasksClicks() {
      this.$refs.xTable.clearCheckboxRow()
      this.operationTasks = !this.operationTasks
    }
  },
  destroyed() {
    this.$eventBus.$off('refreshList')
  },
};
</script>
<style scoped>
.container {
  margin: 16px;
}
</style>
